<template>
  <div class="timely-rate">
    <el-tabs type="border-card">
      <el-tab-pane label="主体">
        <div class="search-header">
          <el-date-picker
            v-model="queryParams.beginDate"
            size="mini"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="开始日期"
            style="width: 180px;margin-right: 20px;"
          />
          <el-date-picker
            v-model="queryParams.endDate"
            size="mini"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 180px;"
            placeholder="结束日期"
            :picker-options="pickerOptionsEnd"
          />
          <el-checkbox v-model="queryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
          <div class="oprate-btn">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="dataChange">查询</el-button>
            <el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="fileLoading" @click="downloadFile">下载</el-button>
          </div>
        </div>
        <el-table
          v-loading="loading"
          element-loading-text="拼命加载中..."
          :data="table"
          :span-method="objectSpanMethod"
          border
          size="mini"
          style="width: 100%;"
          height="calc(100vh - 250px)"
        >
          <el-table-column
            label="事业部"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cuname.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="最新项目名称"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cflastname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="土建工序（批次）" align="center">
            <el-table-column prop="tjbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="tjfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 1)">{{ scope.row.tjnotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 1)">{{ scope.row.tjnofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.tjfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="jztimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.tjtimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="精装工序（批次）" align="center">
            <el-table-column prop="jzbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="jzfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 2)">{{ scope.row.jznotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 2)">{{ scope.row.jznofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.jzfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="jztimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.jztimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="水电工序（批次）" align="center">
            <el-table-column prop="sdbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="sdfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 3)">{{ scope.row.sdnotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 3)">{{ scope.row.sdnofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.sdfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="sdtimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.sdtimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="基础">
        <div class="search-header">
          <el-date-picker
            v-model="baseQueryParams.beginDate"
            size="mini"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="开始日期"
            style="width: 180px;margin-right: 20px;"
          />
          <el-date-picker
            v-model="baseQueryParams.endDate"
            size="mini"
            value-format="yyyy-MM-dd"
            type="date"
            style="width: 180px;"
            placeholder="结束日期"
            :picker-options="pickerOptionsEnd"
          />
          <el-checkbox v-model="baseQueryParams.haveOld" true-label="1" false-label="0" style="margin-left: 10px;" label="旧工序" border size="mini" />
          <div class="oprate-btn">
            <el-button size="mini" type="primary" icon="el-icon-search" @click="searchBeCountData">查询</el-button>
            <el-button size="mini" type="primary" :disabled="loading" icon="el-icon-download" :loading="beData.fileLoading" @click="downloadBeFile">下载</el-button>
          </div>
        </div>
        <el-table
          v-loading="beData.loading"
          element-loading-text="拼命加载中..."
          :data="beData.tableData"
          :span-method="objectSpanMethod"
          border
          size="mini"
          style="width: 100%;"
          height="calc(100vh - 250px)"
        >
          <el-table-column
            label="事业部"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cuname.value }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="最新项目名称"
            min-width="120"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.cflastname }}</span>
            </template>
          </el-table-column>
          <el-table-column label="编号工序（批次）" align="center">
            <el-table-column prop="zjbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="zjfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 4)">{{ scope.row.zjnotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 4)">{{ scope.row.zjnofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.zjfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="zztimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.zjtimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="区域工序（批次）" align="center">
            <el-table-column prop="gqbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="gqfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 5)">{{ scope.row.gqnotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 5)">{{ scope.row.gqnofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.gqfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="gqtimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.gqtimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="批次工序" align="center">
            <el-table-column prop="kjbatch" label="应验收" align="center" min-width="60" />
            <el-table-column prop="kjfinished" label="已完成验收" align="center" min-width="82" />
            <el-table-column label="未及时验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 2, 6)">{{ scope.row.kjnotimely }}</div>
              </template>
            </el-table-column>
            <el-table-column label="未完成验收" align="center" min-width="82">
              <template slot-scope="scope">
                <div class="no-check" @click="goNoCheck(scope.row, 3, 6)">{{ scope.row.kjnofinished }}</div>
              </template>
            </el-table-column>
            <el-table-column label="验收率" align="center" min-width="60">
              <template slot-scope="scope">
                <span>{{ scope.row.kjfinishRate | rate }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="gqtimelyRate" label="及时验收率" align="center" min-width="82">
              <template slot-scope="scope">
                <span>{{ scope.row.kjtimelyRate | rate }}</span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getKeyTimelyRate, getBeKeyTimelyRate, downloadKeyTimelyRate, downloadBeKeyTimelyRate } from '@/api/statement/keyProcessCheck'
import { parseTime } from '@/utils/common'
export default {
  name: 'TimelyRate',
  filters: {
    rate(val) {
      let rval = ''
      rval = (val * 100).toFixed(2)
      return rval + '%'
    }
  },
  data() {
    return {
      dateRangeValue: [],
      table: [],
      loading: false,
      fileLoading: false,
      queryParams: {
        beginDate: '',
        endDate: '',
        reportType: 1,
        haveOld: 0
      },
      /* 基础 */
      baseQueryParams: {
        beginDate: '',
        endDate: '',
        reportType: 1,
        haveOld: 0
      },
      /* 基础数据 */
      beData: {
        loading: false,
        tableData: [],
        fileLoading: false,
        dataSourceKey: null
      },
      dataSourceKey: '',
      pickerOptionsEnd: {
        disabledDate: (time) => {
          const currentDate = new Date(this.queryParams.beginDate)
          const preDate = currentDate.setDate(currentDate.getDate() - 1)
          return time.getTime() < preDate
        }
      }
    }
  },
  created() {
    const today = parseTime(new Date(), '{y}-{m}-{d}')
    const preDate = parseTime(new Date().setMonth((new Date().getMonth() - 3)), '{y}-{m}-{d}')
    this.queryParams.beginDate = preDate
    this.baseQueryParams.beginDate = preDate
    this.queryParams.endDate = today
    this.baseQueryParams.endDate = today
    this.dateRangeValue = [preDate, today]
    // this.init()
  },
  methods: {
    /**
     * reportType 2:未及时验收 3：未完成
     * type 1：土建 2：精装 3：水电 4：编号 5：区域 6：批次
     * */
    goNoCheck(row, reportType, type) {
      const beginDate = [1, 2, 3].includes(type) ? this.queryParams.beginDate : this.baseQueryParams.beginDate
      const endDate = [1, 2, 3].includes(type) ? this.queryParams.endDate : this.baseQueryParams.endDate
      const haveOld = [1, 2, 3].includes(type) ? this.queryParams.haveOld : this.baseQueryParams.haveOld
      if (reportType === 2) { // 未及时
        if (type === 1 && row.tjnotimely === 0) {
          this.$message.success('暂无 土建未及时验收数据')
          return
        } else if (type === 2 && row.jznotimely === 0) {
          this.$message.success('暂无 精装未及时验收数据')
          return
        } else if (type === 3 && row.sdnotimely === 0) {
          this.$message.success('暂无 水电未及时验收数据')
          return
        } else if (type === 4 && row.zjnotimely === 0) {
          this.$message.success('暂无 编号未及时验收数据')
          return
        } else if (type === 5 && row.gqnotimely === 0) {
          this.$message.success('暂无 区域未及时验收数据')
          return
        } else if (type === 6 && row.kjnotimely === 0) {
          this.$message.success('暂无 批次未及时验收数据')
          return
        }
        this.$router.push({ path: '/statement/NoTimely', query: { projectId: row.prjid, type: type, beginDate: beginDate, endDate: endDate, haveOld: haveOld }})
      } else { // 未完成
        if (type === 1 && row.tjnofinished === 0) {
          this.$message.success('暂无 土建未完成验收数据')
          return
        } else if (type === 2 && row.jznofinished === 0) {
          this.$message.success('暂无 精装未完成验收数据')
          return
        } else if (type === 3 && row.sdnofinished === 0) {
          this.$message.success('暂无 水电未完成验收数据')
          return
        } else if (type === 4 && row.zjnofinished === 0) {
          this.$message.success('暂无 编号未完成验收数据')
          return
        } else if (type === 5 && row.gqnofinished === 0) {
          this.$message.success('暂无 区域未完成验收数据')
          return
        } else if (type === 6 && row.kjnofinished === 0) {
          this.$message.success('暂无 批次未及时验收数据')
          return
        }
        this.$router.push({ path: '/statement/NoFinished', query: { projectId: row.prjid, type: type, beginDate: beginDate, endDate: endDate, haveOld: haveOld }})
      }
    },
    init() {
      if (!this.queryParams.beginDate || !this.queryParams.endDate) {
        this.$message.warning('开始时间和结束时间不能为空.')
        return
      }
      this.loading = true
      getKeyTimelyRate(this.queryParams).then(
        (response) => {
          if (response.code === 200) {
            this.table = response.data
            this.dataSourceKey = response.msg
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.loading = false
        }, 200)
      })
    },
    // 下载文件
    downloadFile() {
      this.fileLoading = true
      downloadKeyTimelyRate({ ...this.queryParams, dataSourceKey: this.dataSourceKey }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同（主体）关键工序验收及时率统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.fileLoading = false
      })
    },
    dataChange() {
      this.dataSourceKey = ''
      this.init()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        return {
          rowspan: row.cuname.rowspan,
          colspan: 1
        }
      }
    },
    /* 基础工程数据查询 */
    searchBeCountData() {
      if (!this.baseQueryParams.beginDate || !this.baseQueryParams.endDate) {
        this.$message.warning('开始时间和结束时间不能为空.')
        return
      }
      this.beData.loading = true
      getBeKeyTimelyRate(this.baseQueryParams).then(
        (response) => {
          if (response.code === 200) {
            this.beData.tableData = response.data
            this.beData.dataSourceKey = response.msg
          }
        }
      ).finally(() => {
        setTimeout(() => {
          this.beData.loading = false
        }, 200)
      })
    },
    /* 基础工程下载 */
    downloadBeFile() {
      this.beData.fileLoading = true
      downloadBeKeyTimelyRate({ ...this.baseQueryParams, dataSourceKey: this.beData.dataSourceKey }).then(file => {
        var elink = document.createElement('a')
        var blob = new Blob([file])
        elink.download = '工程协同（基础）关键工序验收及时率统计.xlsx'
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        elink.click()
      }).finally(() => {
        this.beData.fileLoading = false
      })
    }
  }
}
</script>
<style scoped lang="scss">
  .timely-rate {
    padding: 10px 20px;
    .search-header{
      margin: 10px 0;
      .oprate-btn {
        display: inline-block;
        margin-left: 50px;
      }
    }
    .no-check {
      color: #409EFF;
      text-decoration: underline;
      cursor: pointer;
    }
  }
</style>
